<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Siemens Sinnovation</title>
    <style>
        .button {
            background-color: #4CAF50;
            border-radius: 12px;
            border: none;
            color: white;
            padding: 10px 25px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 18px;
            margin: 4px 2px;
            cursor: pointer;
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .button:hover {
            box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        }
    </style>
</head>
<body style="margin: 0;padding: 0;">
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600px">
    <tr>
        <td>
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="600"
                   style="border-collapse: collapse;">
                <tr>
                    <td align="center" style="padding: 40px 0 30px 0;">
                        <span th:text="${imageResourceName}"></span>
                    </td>
                </tr>
                <tr>
                    <td bgcolor="#ffffff" style="padding: 20px 30px 20px 30px">
                        <h4>The following message was created by <span th:text="${name}"></span> in the
                            Siemens DFFA group: </h4>
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td><span th:text="${title}">title</span></td>
                            </tr>
                            <tr>
                                <td style="padding: 20px 0 30px 0">
                                    <span th:text="${description}">description</span>
                                </td>
                            </tr>
                            <tr>
                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                    <tr>
                                        <td align="center" style="padding: 5px 0 3px 0">Status:<span
                                                th:text="${status}"> OPEN FOR JOINING</span></td>
                                        <td align="center" style="padding: 5px 0 3px 0">Date submitted: 28/08/2017 <span
                                                th:text="${createDate}">createDate</span></td>
                                        <td align="center" style="padding: 5px 0 3px 0">Days left to join: 10h<span
                                                th:text="${leftTime}">leftTime</span></td>
                                    </tr>
                                </table>
                            </tr>
                            <tr>
                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                    <tr>
                                        <td style="padding: 40px 0px 10px 0px">
                                            Team Member:
                                        </td>
                                    </tr>
                                    <tr th:each="sysUser :${sysUsers}">
                                        <td style="padding: 5px 0px 5px 0px"><span
                                                th:text="${sysUser.getName()}+', Email: '+${sysUser.getAge()}"></span>
                                        </td>
                                    </tr>
                                </table>
                            </tr>
                            <tr>
                                <td align="center" style="padding: 5px 40px 5px 40px">
                                    <button class="button">View Details</button>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>